@extends('home.base')
@section('title')
    {{$data->title}}
@endsection
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('static/home/css/slider-pro.min.css')}}" media="screen"/>
    @include('home.header')
    <div id="app">
        <div class="handtitle">
            <div class="w1200 con">
                <h3>{{$data->title}}</h3>
                <i-button>关注小区</i-button>
            </div>
        </div>
        <div class="position">
            <div class="w1200">
                <Breadcrumb>
                    <breadcrumb-item to="/">首页</breadcrumb-item>
                    <breadcrumb-item to="/community/{{$data->region}}">小区列表</breadcrumb-item>
                    <breadcrumb-item>{{$data->title}}</breadcrumb-item>
                </Breadcrumb>
            </div>
        </div>
        <div class="tabs-community-title w1200">
            <Anchor @on-select="handleJump">
                <anchor-link href="#huxing" title="小区详情" ></anchor-link>
                <anchor-link href="#xiangce" title="小区相册" ></anchor-link>
                <anchor-link href="#hand" title="小区二手房" ></anchor-link>
                <anchor-link href="#rental" title="小区租房" ></anchor-link>
                <anchor-link href="#zhoubian" title="周边配套" ></anchor-link>
                <anchor-link href="#fujin" title="附近小区" ></anchor-link>
                <anchor-link href="#jisuan" title="房贷计算" ></anchor-link>
            </Anchor>
        </div>

        <div class="property-detail community " id="huxing">
            <div class="w1200 top">
                <div class="left">
                    <div id="sliderpro" class="slider-pro">
                        <div class="sp-slides">
                            @if(isset($data->images) && !$data->images == '')
                                @foreach($data->images as $b)
                                    <div class="sp-slide">
                                        <img class="sp-image" src="/static/home/images/blank.gif"
                                             data-src="{{$b['bigimg']}}"
                                        />
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="sp-thumbnails">
                            @if(isset($data->images) && !$data->images == '')
                                @foreach($data->images as $s)
                                    <div class="sp-thumbnail">
                                        <div class="sp-thumbnail-image-container">
                                            <img class="sp-thumbnail-image" src="{{$s['smallimg']}}"/>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="price">
                        <div class="total">
                            <i style="color:#333;font-style: normal;">均价</i> <span>{{ (int)$data->handroom_avg }}</span>元/平米
                        </div>
{{--                        <div class="aver">{{$data->average}}元/平米</div>--}}
                    </div>
                    <div class="main">
                        <p><span>建筑年代</span> {{$data->year}}年</p>
                        <p><span>停车位</span> {{$data->park_place}}个</p>
                        <p><span>规划户数</span> {{$data->plan_num}}户</p>
                        <p><span>产权年限</span> {{$data->age_limit}}</p>
                        <p><span>物业费</span> {{$data->pm_fee}}</p>
                        <p><span>物业公司</span> {{$data->pmc}}</p>
                        <p><span>开发商</span> {{$data->developer}}</p>
                    </div>
                    <div class="contact">
                        <img src="/images/default.jpg" alt="">
                        <div class="desc">
                            <div class="name">许某某</div>
                            <div class="tel">13765689867</div>
                        </div>
                        <i-button type="warning">在线咨询</i-button>
                    </div>
                </div>
            </div>
            <div id="xiangce"></div>
            <div class="detail-con">
                <div class="w1200">
                    <div class="pro-desc">
                        <div class="title">
                            <h3>小区<span>相册</span></h3>
                        </div>
                        <div>
                            {!! $data->content !!}
                        </div>
                    </div>
                    <div id="hand"></div>
                    <div class="pro-desc">
                        <div class="title">
                            <h3>{{$data->title}}二手房</h3>
                        </div>
                        <div class="comm-list">
                            @foreach($handroom as $n)
                                <div class="list">
                                    <div class="img">
                                        <a href="/handroom/{{$n->id}}" target="_blank">
                                            @if($n->thumb)
                                                <img src="{{$n->thumb}}" alt="">
                                            @else
                                                <img src="/images/default.jpg" alt="">
                                            @endif
                                        </a>
                                    </div>
                                    <div class="detail">
                                        <h3 class="nowrap">
                                            <a href="/handroom/{{$n->id}}" target="_blank">{{$n->title}}</a>
                                        </h3>
                                        <div class="tips">
                                            <div class="price">
                                                <span>{{$n->price}}</span>万
                                                {{$n->acreage}}㎡
                                            </div>
                                            <div class="count">
                                                {{$n->room}}室{{$n->hall}}厅
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="view-all">
                            <i-button to="/community/hand/{{$data->id}}" target="_blank">查看全部{{$data->title}}二手房房源</i-button>
                        </div>
                    </div>
                    <div id="rental"></div>
                    <div class="pro-desc">
                        <div class="title">
                            <h3>{{$data->title}}租房</h3>
                        </div>
                        <div class="comm-list">
                            @foreach($rental as $n)
                                <div class="list">
                                    <div class="img">
                                        <a href="/rentalhouse/{{$n->id}}" target="_blank">
                                            @if($n->thumb)
                                                <img src="{{$n->thumb}}" alt="">
                                            @else
                                                <img src="/images/default.jpg" alt="">
                                            @endif
                                        </a>
                                    </div>
                                    <div class="detail">
                                        <h3 class="nowrap">
                                            <a href="/rentalhouse/{{$n->id}}" target="_blank">{{$n->title}}</a>
                                        </h3>
                                        <div class="tips">
                                            <div class="price">
                                                <span>{{$n->price}}</span>元/月
                                                {{$n->acreage}}㎡
                                            </div>
                                            <div class="count">
                                                {{$n->room}}室{{$n->hall}}厅
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="view-all">
                            <i-button to="/community/rental/{{$data->id}}" target="_blank">查看全部{{$data->title}}租房房源</i-button>
                        </div>
                    </div>
                    <div id="zhoubian"></div>
                    <div class="pro-desc">
                        <div class="title">
                            <h3>周边<span>配套</span></h3>
                        </div>
                        <div class="zhoubian">
                            <div class="map-txt">
                                <ul class="map-txt-icon">
                                    <li val_class="学校">
                                        <Icon type="ios-school"></Icon>
                                        <span>学校</span>
                                    </li>
                                    <li val_class="购物">
                                        <Icon type="md-cart"></Icon>
                                        <span>购物</span>
                                    </li>
                                    <li val_class="餐饮">
                                        <Icon type="ios-restaurant"></Icon>
                                        <span>餐饮</span>
                                    </li>
                                    <li val_class="银行">
                                        <Icon type="logo-bitcoin"></Icon>
                                        <span>银行</span>
                                    </li>
                                    <li val_class="公园">
                                        <Icon type="md-walk"></Icon>
                                        <span>公园</span>
                                    </li>
                                    <li val_class="交通">
                                        <Icon type="md-bus"></Icon>
                                        <span>交通</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="map" id="allmap"></div>
                            <input type="hidden" id="map" value="{{$data->map}}">
                        </div>
                    </div>
                    <div id="fujin"></div>
                    <div class="pro-desc">
                        <div class="title">
                            <h3>{{$data->title}}附近小区</h3>
                        </div>
                        <div class="comm-list">
                            @foreach($near as $n)
                                <div class="list">
                                    <div class="img">
                                        <a href="/residential/{{$n->id}}" target="_blank">
                                        @if($n->thumb)
                                        <img src="{{$n->thumb}}" alt="">
                                        @else
                                        <img src="/images/default.jpg" alt="">
                                        @endif
                                        </a>
                                    </div>
                                    <div class="detail">
                                        <h3>
                                            <a href="/residential/{{$n->id}}" target="_blank">{{$n->title}}</a>
                                        </h3>
                                        <div class="tips">
                                            <div class="price">
                                                @if($n->handroom_count)
                                                <span>{{$n->handroom_avg}}</span>元/平米
                                                @else
                                                <span>暂未报价</span>
                                                @endif
                                            </div>
                                            <div class="count">
                                                在售房源 {{$n->handroom_count}} 套
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div id="jisuan">
                        @include('home.housecal')
                    </div>
                </div>
            </div>
            <input type="hidden" id="d_type" value="community">
            <input type="hidden" id="property" value="{{$data->id}}">
            @include('home.viewForm')
        </div>
        @include('home.footer')
    </div>
@endsection

@section('script')
    <style>
        .qr .qr-menu .menu a.menu_7{color:#f90;border-bottom:2px solid #f90}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2pOLT55iaTI8LVvPfirAgUDqaZa0sdnj"></script>
    <script src="{{asset('static/home/js/jquery.sliderPro.min.js')}}"></script>
    <script src="{{asset('static/home/js/detail.js')}}"></script>
    <script>
        var lngLat = document.getElementById("map").value.split(',')
        var map;
        var bounds;
        var circle;
        var local;
        var lng=lngLat[0];
        var lat=lngLat[1];//指定位置的经度纬度可以到百度定位拾取系统去拿 http://api.map.baidu.com/lbsapi/getpoint/index.html
        var search= '学校';
        var MyMarker;
        // 百度地图API功能
        $(function(){
            map = new BMap.Map("allmap");
            GetLocation();
            var mPoint = new BMap.Point(lng,lat);
            var MyIcon = new BMap.Icon("/images/tip.png", new BMap.Size(26,28));
            MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});
            MyMarker.setAnimation(BMAP_ANIMATION_BOUNCE);
            map.enableScrollWheelZoom();
            map.centerAndZoom(mPoint,15);
            map.addOverlay(MyMarker);

            $('.map-txt-icon li').each(function(index) {
                $(this).click(function(){
                    $(this).parents('.map-txt-icon').find('.tuijian_in').removeClass('tuijian_in');
                    $(this).addClass("tuijian_in");
                    search = $(this).attr('val_class');
                    Search(search,mPoint);
                });
            });
            Search(search,mPoint);

        });

        /**
         * 得到圆的内接正方形bounds
         * @param {Point} centerPoi 圆形范围的圆心
         * @param {Number} r 圆形范围的半径
         * @return 无返回值
         */
        function getSquareBounds(centerPoi,r){
            var a = Math.sqrt(2) * r; //正方形边长
            var mPoi = getMecator(centerPoi);
            var x0 = mPoi.x, y0 = mPoi.y;
            var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点
            var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点
            var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
            return new BMap.Bounds(sw, ne);
        };
        //根据球面坐标获得平面坐标。
        function getMecator(poi){
            return map.getMapType().getProjection().lngLatToPoint(poi);
        };
        //根据平面坐标获得球面坐标。
        function getPoi(mecator){
            return map.getMapType().getProjection().pointToLngLat(mecator);
        };

        function Search(search,mPoint){
            map.clearOverlays();
            circle = new BMap.Circle(mPoint,1000,{stroke:"white",strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
            map.addOverlay(circle);
            local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
            bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
            local.searchInBounds(search,bounds);
            map.addOverlay(MyMarker);
        };

        function GetLocation(){
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        lng = r.point.lng;
                        lat = r.point.lat;
                    }else{
                        alert('failed'+this.getStatus());
                    }
                },{enableHighAccuracy: true}
            );
        };
    </script>
@endsection